<script setup lang="ts" name="footerNav">
import { reactive, computed } from 'vue'
//const { useCommon } = $globalStore

let data = reactive({
  footerActive: "Home",
  dot: false,
});

// const goodsNum = computed(() => {
//   return useCommon.goods_card_num;
// });
</script>

<template>
  <div class="footer_nav">
    <van-tabbar class="footer-bar" v-model="data.footerActive" :route="true" safe-area-inset-bottom>
      <van-tabbar-item name="Home" replace icon="wap-home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item name="Classify" replace icon="shop-o" to="/classify">分类</van-tabbar-item>
      <van-tabbar-item name="Serve" replace icon="list-switching" to="/serve">服务</van-tabbar-item>
<!--      <van-tabbar-item-->
<!--          name="Shop"-->
<!--          replace-->
<!--          icon="cart-o"-->
<!--          to="/shop"-->
<!--          :dot="data.dot"-->
<!--          :badge="goodsNum"-->
<!--      >服务</van-tabbar-item>-->
      <van-tabbar-item name="My" replace icon="manager-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped>
.footer_nav{
  height: 50px;
  .footer-bar{
    position: absolute;
    bottom: 0;
  }
}
</style>
